<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form :inline="true" ref="queryRef" class="demo-form-inline">
      <el-form-item label="年份">
        <el-date-picker v-model="queryParams.settlementDate" type="year" placeholder="选择年份" value-format="YYYY"
          :disabled-date="disabledDate" @change="handleQuery" />
      </el-form-item>
      <!-- <el-form-item label="结束日期">
        <el-date-picker v-model="queryParams.endTime" type="month" placeholder="选择结束日期" :disabled-date="disabledDate"
          @change="handleQuery" />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%" show-summary v-loading="loading">
      <!-- <el-table-column type="index" width="55" align="center" label="序号" /> -->
      <el-table-column align="center">
        <template #header>
          <p style="font-size: 20px;height: 10px;"> {{ queryParams.settlementDate }}年1月——12月作业产值数据与考核收入差异表</p>
        </template>
        <el-table-column prop="dept_name" width="180" align="center" label="收入单位">
        </el-table-column>
        <el-table-column prop="outPutValue" align="center" label="产值数据" />
        <el-table-column prop="assessmentIncome" align="center" label="考核收入" />
        <el-table-column label="产值数据与考核收入差额（产值数据-考核收入）" :formatter="formatterSum" align="center" />
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="js" setup>
import { getCurrentInstance, ref } from 'vue';
import { getDeptOutputValuecontrast } from '@/api/statement.js'
const { proxy } = getCurrentInstance()

// 获取当年的一月
const now = new Date();
const year = ref(now.getFullYear())
const month = ref(now.getMonth())

const queryParams = ref({
  settlementDate: year.value
})
const loading = ref(true)
const tableData = ref([])
//获取列表数据
const getList = () => {
  loading.value = true;
  getDeptOutputValuecontrast(queryParams.value).then(res => {
    tableData.value = res.data
    loading.value = false;
  }).catch(error => {
    console.log(error);
  })
}
// 日期禁选部分
const disabledDate = (time) => {
  return time.getTime() > Date.now()
}
//计算合计
const formatterSum = (row, column, cellValue, index) => {
  cellValue = (row.outPutValue ?? 0) - (row.assessmentIncome ?? 0)
  return cellValue < 0 ? cellValue : '+' + cellValue
}
//查询列表
const handleQuery = () => {
  if (!queryParams.value.settlementDate) {
    queryParams.value.settlementDate = year.value
  }
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
getList()
</script>